import React, { useEffect, useState } from 'react'
import { PageHeader, Button, Modal, Form, Input } from 'antd'

import E from 'wangeditor'

let editor = null
export default function Edit() {
  const [content, setContent] = useState()
  const [isModalVisible, setIsModalVisible] = useState(false)

  useEffect(() => {
    editor = new E('#div1')
    editor.config.onchange = newHtml => {
      setContent(newHtml)
    }
    editor.create()

    return () => {
      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
      editor.destroy()
    }
  }, [])

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleOk = () => {
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  const onFinish = values => {
    console.log('Success:', values)
  }

  return (
    <div>
      <PageHeader
        ghost={false}
        onBack={() => window.history.back()}
        title="文章编辑"
        extra={[
          <Button key="1" type="primary" onClick={() => setIsModalVisible(true)}>
            提交文章
          </Button>
        ]}
      ></PageHeader>
      <div id="div1" style={{ padding: '0 20px 20px', background: '#fff' }}></div>
      <Modal
        zIndex={99999}
        okText="提交"
        cancelText="取消"
        title="填写文章标题"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        transitionName=""
      >
        <Form
          name="basic"
          labelCol={{
            span: 2
          }}
          wrapperCol={{
            span: 22
          }}
          onFinish={onFinish}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入标题'
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="副标题"
            name="subTitle"
            rules={[
              {
                required: true,
                message: '请输入副标题'
              }
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
